<template>
  <el-drawer
    v-model="drawerVisible"
    :title="$t('notification.title')"
    direction="rtl"
    size="400px"
    :before-close="handleClose"
    class="notification-drawer"
  >
    <!-- 头部操作栏 -->
    <template #header>
      <div class="drawer-header">
        <div class="header-left">
          <el-icon :size="20"><Bell /></el-icon>
          <span class="header-title">{{ $t('notification.title') }}</span>
          <el-badge v-if="unreadCount > 0" :value="unreadCount" class="unread-badge" />
        </div>
        <div class="header-actions">
          <el-button 
            v-if="hasUnread" 
            link 
            type="primary" 
            size="small"
            @click="handleMarkAllRead"
          >
            {{ $t('notification.markAllRead') }}
          </el-button>
          <el-button 
            v-if="notifications.length > 0"
            link 
            type="danger" 
            size="small"
            @click="handleClearAll"
          >
            {{ $t('notification.clear') }}
          </el-button>
        </div>
      </div>
    </template>

    <!-- 通知列表 -->
    <div class="notification-list">
      <!-- 空状态 -->
      <el-empty 
        v-if="notifications.length === 0" 
        :description="$t('notification.empty')"
        :image-size="120"
      >
        <template #image>
          <el-icon :size="80" color="#909399"><BellFilled /></el-icon>
        </template>
      </el-empty>

      <!-- 按时间分组显示 -->
      <div v-else>
        <!-- 今天 -->
        <div v-if="groupedNotifications.today.length > 0" class="notification-group">
          <div class="group-title">{{ $t('notification.today') }}</div>
          <NotificationItem
            v-for="item in groupedNotifications.today"
            :key="item.id"
            :notification="item"
            @read="handleMarkAsRead"
            @delete="handleDelete"
          />
        </div>

        <!-- 昨天 -->
        <div v-if="groupedNotifications.yesterday.length > 0" class="notification-group">
          <div class="group-title">{{ $t('notification.yesterday') }}</div>
          <NotificationItem
            v-for="item in groupedNotifications.yesterday"
            :key="item.id"
            :notification="item"
            @read="handleMarkAsRead"
            @delete="handleDelete"
          />
        </div>

        <!-- 更早 -->
        <div v-if="groupedNotifications.earlier.length > 0" class="notification-group">
          <div class="group-title">{{ $t('notification.earlier') }}</div>
          <NotificationItem
            v-for="item in groupedNotifications.earlier"
            :key="item.id"
            :notification="item"
            @read="handleMarkAsRead"
            @delete="handleDelete"
          />
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useNotificationStore } from '@/stores/notification'
import { ElMessage, ElMessageBox } from 'element-plus'
import NotificationItem from './NotificationItem.vue'

const { t } = useI18n()

// Props
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
})

// Emits
const emit = defineEmits(['update:modelValue'])

// Store
const notificationStore = useNotificationStore()

// 计算属性
const drawerVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const notifications = computed(() => notificationStore.notifications)
const unreadCount = computed(() => notificationStore.unreadCount)
const hasUnread = computed(() => notificationStore.hasUnread)
const groupedNotifications = computed(() => notificationStore.groupedNotifications)

// 方法
const handleClose = (done) => {
  done()
}

const handleMarkAsRead = (id) => {
  notificationStore.markAsRead(id)
}

const handleMarkAllRead = () => {
  notificationStore.markAllAsRead()
  ElMessage.success(t('notification.markAllReadSuccess'))
}

const handleDelete = (id) => {
  notificationStore.deleteNotification(id)
  ElMessage.success(t('notification.deleteSuccess'))
}

const handleClearAll = () => {
  ElMessageBox.confirm(
    t('notification.clearConfirm'),
    t('notification.clearTitle'),
    {
      confirmButtonText: t('common.confirm'),
      cancelButtonText: t('common.cancel'),
      type: 'warning'
    }
  ).then(() => {
    notificationStore.clearAll()
    ElMessage.success(t('notification.clearSuccess'))
  }).catch(() => {
    // 取消操作
  })
}
</script>

<style scoped>
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.unread-badge {
  margin-left: -4px;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.notification-list {
  height: 100%;
  overflow-y: auto;
}

.notification-group {
  margin-bottom: 24px;
}

.group-title {
  font-size: 12px;
  color: #909399;
  padding: 8px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid #e4e7ed;
}

/* 暗黑模式适配 */
:deep(.el-drawer__header) {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;
}

html.dark .header-title {
  color: #e5eaf3;
}

html.dark .group-title {
  color: #b3b3b3;
  border-bottom-color: #303030;
}

html.dark :deep(.el-drawer__header) {
  border-bottom-color: #303030;
}
</style>

